<template>
  <div class="problemList bg-f2">
    <div class="problem-R noControlPanel bg-f2 bg-fff">
      <!-- 搜索条件 -->
      <el-form :inline="true">
        <el-form-item>
          <el-button :disabled="quanxianBtns.btn1" type="success" size="medium" class="max_btn btnSizeStyle" icon="el-icon-plus" @click="addComputer('添加')">添加机房</el-button>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="harderBox.nameList" clearable prefix-icon="el-icon-search" placeholder="输入机房名称" class="search_btn search_icon"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="getList('查询')">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        ref="multipleTable"
        :data="roleList"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column prop="computerRoomName" label="机房名称" sortable :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="computerRoomAddress" min-width="150" label="地址" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="机房设备" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button @click="seeList(scope.row)" class="noButton fontColor" :disabled="scope.row.count < 1 || quanxianBtns.btn5">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="添加人" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createDate" min-width="120" label="添加时间" sortable>
          <template slot-scope="scope">{{ scope.row.createDate | dateFormat }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150" align="right">
          <template slot-scope="scope">
            <div class="operations">
              <!-- 不可以点击加上 noAction这个类名 -->
              <el-button type="text" :disabled="quanxianBtns.btn2" @click="addEquipment(scope.row)">添加设备</el-button>
              <span class="operation"></span>
              <el-button type="text" :disabled="quanxianBtns.btn3" @click="editComputer(scope.row, '编辑')">编辑</el-button>
              <span class="operation"></span>
              <el-button type="text" :disabled="quanxianBtns.btn4" class="color_f56f6f Btn_nan" @click="delBtn(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12">
          <!-- <el-button
            type="primary"
            @click="addWhite('加入白名单')"
          >加入白名单</el-button>-->
        </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
    <!-- 添加/修改 -->
    <el-drawer :visible.sync="increased" :with-header="false" :wrapperClosable="false">
      <div class="addUer_title">
        <span>{{ title }}</span>
        <i class="el-icon-close addUer_icon" @click="cancelDrawer()"></i>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
        <el-row>
          <el-col :span="23">
            <el-form-item label="机房名称：" prop="computerRoomName">
              <el-input v-model.trim="ruleForm.computerRoomName" clearable placeholder="请输入机房名称"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="23">
            <el-form-item label="机房地址：" prop="address">
              <el-select v-model.trim="ruleForm.address" clearable filterable placeholder="请选择省/市/区" class="inputSelect">
                <el-option v-for="item in addressList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="23">
            <el-form-item label="详细地址：" prop="computerRoomAddress">
              <el-input type="textarea" :rows="5" placeholder="请输入详细地址信息，如门牌号、楼栋号等" v-model.trim="ruleForm.computerRoomAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="forms_fooer">
          <el-button class="users_btn" @click="cancelDrawer()">取消</el-button>
          <el-button type="primary" class="users_btn" :disabled="primaryDisable" @click="submitForm(title)" v-preventReClick>确定</el-button>
        </div>
      </el-form>
    </el-drawer>
    <!-- 添加机房设备 -->
    <el-dialog :visible.sync="dialogVisible2" width="45.8%" :close-on-click-modal="false" @close="add_cancelBtn">
      <span slot="title" class="dialogTitle">添加设备</span>
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model.trim="searchName" clearable prefix-icon="el-icon-search" placeholder="输入设备名称" class="search_btn"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn('查询')">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        max-height="400"
        @select="isCheck2"
        @select-all="isCheckAll2"
        border
        :data="addData"
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        v-loading="addtableLoad"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ addTableMessage }}</template>
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column label="设备名称" prop="zcmc" sortable show-overflow-tooltip></el-table-column>
        <el-table-column label="设备类型" prop="zclxmc">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <div class="fenyeBox">
          <el-pagination background layout="prev, pager, next" @current-change="addHandleCurrentChange" :current-page.sync="addCurrentPage" :total="addTotal"></el-pagination>
          <div>
            <el-button class="btnSizeStyle" @click="add_cancelBtn" size="small">取消</el-button>
            <el-button class="btnSizeStyle" type="primary" @click="add_OkBtn" :disabled="addSheBeiName2.length > 0 ? false : true" size="small">确定</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
    <!-- 查看机房设备 -->
    <el-dialog :visible.sync="dialogVisible3" width="45.8%" title="机房设备信息" :close-on-click-modal="false" @close="see_cancelBtn">
      <el-row class="detailsRow">
        <el-col :span="24">
          <div class="details-row">
            <span>机房名称：</span>
            <span>{{ seeData.computerRoomName }}</span>
          </div>
          <div class="details-row">
            <span>机房地址：</span>
            <span>{{ seeData.computerRoomAddress }}</span>
          </div>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        max-height="560"
        border
        :data="seeDeviceData"
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        v-loading="seetableLoad"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ seeTableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column label="已添加设备名称" prop="zcmc" sortable show-overflow-tooltip min-width="200"></el-table-column>
        <el-table-column label="设备类型" prop="zclxmc" min-width="200">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right" min-width="80">
          <template slot-scope="scope">
            <el-button type="text" class="color_f56f6f" @click="see_delBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <div class="fenyeBox">
          <el-pagination background layout="prev, pager, next" @current-change="seeHandleCurrentChange" :current-page.sync="seeCurrentPage" :total="seeTotal"></el-pagination>
          <div>
            <el-button class="btnSizeStyle" @click="see_cancelBtn" size="small">取 消</el-button>
            <el-button class="btnSizeStyle" type="primary" @click="see_cancelBtn" size="small">确 定</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl.js'
import { getUrl } from '@/utils/getUrl.js'
// import { endLoading } from '@/utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
// import { getUrl } from '@/utils/getUrl.js'
export default {
  data: function () {
    return {
      harderBox: {
        nameList: '',
      },
      currentPage: 1,
      pageSize: 10,
      roleList: [],
      total: 0,
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      increased: false,
      title: '',
      ruleForm: {
        computerRoomName: '',
        computerRoomAddress: '',
      },
      addressList: [],
      rules: {
        computerRoomName: [
          { required: true, message: '请输入机房名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
        ],
      },
      dialogVisible2: false,
      searchName: '',
      addCurrentPage: 1,
      addTotal: 0,
      addtableLoad: false,
      addtableTimer: null,
      addTableMessage: '',
      addData: [],
      addRow: [],
      addSheBeiName2: [],
      dialogVisible3: false,
      seeDeviceData: [],
      seeCurrentPage: 1,
      seeTotal: 0,
      primaryDisable: false,
      rowData: {},
      seetableLoad: false,
      seeTableMessage: '',
      seetableTimer: null,
      seeData: {
        computerRoomName: '',
        computerRoomAddress: '',
      },
      seeRow: {},
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
        btn4: true,
        btn5: true,
      },
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.roleList = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    seetableLoad(newVal, oldVal) {
      this.seetableTimer = setTimeout(() => {
        if (this.seetableLoad) {
          this.seetableLoad = false
          this.seeDeviceData = []
          this.seeTableMessage = tableMessageText
          // this.seeTotal = 0
        }
      }, timeLoad)
    },
    addtableLoad(newVal, oldVal) {
      this.addtableTimer = setTimeout(() => {
        if (this.addtableLoad) {
          this.addtableLoad = false
          this.addData = []
          this.addTableMessage = tableMessageText
          // this.addTotal = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    // 权限按钮
    this.jurisdictionBtn()
    this.getList('全部')
  },
  methods: {
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.getList('全部')
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'ZCZX_JFGL_JFLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'jfgl:create') {
              this.quanxianBtns.btn1 = false // 添加机房
            } else if (item2.qxdm === 'jfsb:create') {
              this.quanxianBtns.btn2 = false // 添加设备
            } else if (item2.qxdm === 'jfgl:update') {
              this.quanxianBtns.btn3 = false // 编辑
            } else if (item2.qxdm === 'jfgl:delete') {
              this.quanxianBtns.btn4 = false // 删除
            } else if (item2.qxdm === 'jfsb:selectAll') {
              this.quanxianBtns.btn5 = false // 查看
            }
          })
        }
      })
    },
    // 获取数据
    getList(val) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      if (val === '查询') {
        this.currentPage = 1
        this.pageSize = 10
        // this.harderBox.nameList = ''
      } else {
        this.harderBox.nameList = ''
      }
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      params.append('computerRoomName', this.harderBox.nameList)
      this.setList(params)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${ziC}jfgl/selectAll`, params)
      switch (res.code) {
        case '0000':
          this.roleList = res.data.list
          this.total = res.data.total
          break
        default:
          this.roleList = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    handleSizeChange(newsize) {
      this.pageSize = newsize
      this.currentPage = 1
      this.getList('全部')
    },
    handleCurrentChange(newChange) {
      this.currentPage = newChange
      this.getList('全部')
    },
    // 添加机房
    addComputer(title) {
      this.title = title
      this.ruleForm.computerRoomName = ''
      this.ruleForm.computerRoomAddress = ''
      this.increased = true
    },
    // 修改
    editComputer(row, title) {
      this.title = title
      this.ruleForm.computerRoomName = row.computerRoomName
      this.ruleForm.computerRoomAddress = row.computerRoomAddress
      this.rowData = row
      this.increased = true
    },
    // 添加设备
    addEquipment(row) {
      this.addSheBeiName2 = []
      this.addCurrentPage = 1
      this.addTotal = 0
      this.searchName = ''
      this.getAddDevice()
      this.addRow = row
      this.dialogVisible2 = true
    },
    async getAddDevice() {
      clearTimeout(this.addtableTimer)
      this.addtableLoad = true
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('M_', this.addCurrentPage)
      params.append('N_', 10)
      params.append('ZCMCS', this.searchName)
      params.append('userId', user.id)
      const { data: res } = await this.$http.post(`${ziC}jfsb/seeDevice`, params)
      switch (res.code) {
        case '0000':
          this.addData = res.data.list
          this.addTotal = res.data.total
          break
        default:
          this.addData = []
          this.addTableMessage = res.message
          break
      }
      this.addtableLoad = false
    },
    // 删除
    delBtn(row) {
      this.$confirm('此操作将永久删除此项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // 点击确定
          this.delF(row)
        })
        .catch(() => {
          // 点击取消
        })
    },
    async delF(row) {
      console.log(row)
      const params = new URLSearchParams()
      params.append('ids', row.id)
      const { data: res } = await this.$http.post(`${ziC}jfgl/delete`, params)
      switch (res.code) {
        case '0000':
          this.getList('查询')
          this.$message.success(res.message)
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 加入白名单
    // addWhite() {},
    // 取消
    cancelDrawer() {
      this.increased = false
    },
    // 确定/提交
    async submitForm(title) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return
        }
        let url = ''
        const params = new URLSearchParams()
        params.append('computerRoomName', this.ruleForm.computerRoomName)
        params.append('computerRoomAddress', this.ruleForm.computerRoomAddress)
        if (title === '编辑') {
          url = 'update'
          params.append('ID', this.rowData.id)
        } else {
          url = 'create'
        }
        const { data: res } = await this.$http.post(`${ziC}jfgl/${url}`, params)
        switch (res.code) {
          case '0000':
            this.$message.success(res.message)
            this.currentPage = 1
            this.pageSize = 10
            this.harderBox.nameList = ''
            this.getList('全部')
            this.increased = false
            break
          default:
            this.$message.error(res.message)
            break
        }
      })
    },
    // 查看机房设备
    seeList(row) {
      this.seeRow = row
      this.seeData = {
        computerRoomName: row.computerRoomName,
        computerRoomAddress: row.computerRoomAddress,
      }
      clearTimeout(this.seetableTimer)
      this.seetableLoad = true
      const params = new URLSearchParams()
      params.append('M_', 1)
      params.append('N_', 10)
      params.append('computerRoomId', row.id)
      this.getSeeList(row, params)
    },
    async getSeeList(row, params) {
      const { data: res } = await this.$http.post(`${ziC}jfsb/selectAll`, params)
      this.seetableLoad = false
      switch (res.code) {
        case '0000':
          this.seeDeviceData = res.data.list
          this.seeTotal = res.data.total
          break
        default:
          this.seeDeviceData = []
          this.seeTableMessage = res.message
          break
      }
      this.dialogVisible3 = true
    },
    // 添加设备查询
    searchBtn() {
      this.addCurrentPage = 1
      this.addTotal = 0
      this.getAddDevice()
    },
    // 添加设备切换页面
    addHandleCurrentChange(val) {
      this.addCurrentPage = val
      this.getAddDevice()
    },
    // 添加界面取消按钮
    add_cancelBtn() {
      this.dialogVisible2 = false
    },
    // 添加界面确定按钮
    async add_OkBtn() {
      const list = []
      this.addSheBeiName2.forEach((item) => {
        list.push({ computerRoomId: this.addRow.id, ZC_ID: item.id })
      })
      const params = new URLSearchParams()
      params.append('json', JSON.stringify(list))
      const { data: res } = await this.$http.post(`${ziC}jfsb/create`, params)
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          this.dialogVisible2 = false
          this.getList('全部')
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 添加设备复选框
    isCheck2(selection, row) {
      this.addSheBeiName2 = selection
    },
    // 添加设备复选框全选
    isCheckAll2(selection, row) {
      this.addSheBeiName2 = selection
    },
    // 查看界面删除按钮
    async see_delBtn(row) {
      this.$confirm('此操作将永久删除此项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // 点击确定
          this.seeDelF(row)
        })
        .catch(() => {
          // 点击取消
        })
    },
    async seeDelF(row) {
      const params = new URLSearchParams()
      params.append('ids', row.id)
      const { data: res } = await this.$http.post(`${ziC}jfsb/delete`, params)
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          this.seeList(this.seeRow)
          this.getList('全部')
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 查看界面取消按钮
    see_cancelBtn() {
      this.dialogVisible3 = false
    },
    seeHandleCurrentChange(newChange) {
      this.seeCurrentPage = newChange
      clearTimeout(this.seetableTimer)
      this.seetableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.seeCurrentPage)
      params.append('N_', 10)
      this.getSeeList(this.seeRow, params)
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/detailsRow.scss';
::v-deep .el-dialog__body {
  padding-top: 0;
}
.btn_header {
  height: 35px;
  line-height: 33px;
  margin-bottom: 15px;
  > li:first-child {
    margin-left: 0;
  }
  > li {
    float: left;
    margin-left: 10px;
  }
  .max_btn {
    width: 105px;
    height: 34px;
    line-height: 34px;
    padding: 0;
  }
  .search_btn {
    width: 220px;
  }
  .max_btn2 {
    height: 34px;
    line-height: 34px;
    padding: 0 12px;
  }
}
.addMargin {
  height: 55px;
  line-height: 67px;
}
.operation {
  display: inline-block;
  margin: 0 5px;
  height: 10px;
  border-left: 1.5px solid #b3b3b3;
}
.usersNumber {
  color: rgba(46, 146, 247, 1);
}
.el-card {
  margin-top: 15px;
  border-radius: 0;
  .tiIcon {
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
  }
}
.pageFloat {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 48px;
}
.el-drawer {
  .addUer_title {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 61px;
    line-height: 61px;
    border-bottom: 1px solid #ededed;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8);
    > span {
      font-size: 18px;
      font-weight: 600;
    }
    .addUer_icon {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      flex-flow: column;
      justify-content: center;
      cursor: pointer;
    }
  }
  .el-row {
    margin-top: 30px;
  }
  .forms_fooer {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center;
    height: 61px;
    line-height: 61px;
    border-top: 1px solid #ededed;
    .users_btn {
      padding: 0 10px;
      height: 36px;
    }
  }
  .inputSelect {
    width: 260px;
  }
}
.fenyeBox {
  display: flex;
  justify-content: space-between;
}
.noButton.el-button {
  border: 0;
  background-color: transparent;
  padding-left: 0;
}
</style>
